<script setup>
import StudentList from "./components/StudentList.vue"
import { provide, ref } from "vue";
import StudentForm from "./components/StudentForm.vue";

/* 

    依赖注入
        -通过依赖注入，可以跨越多层组件向其他组件传递数据
            -步骤
                1.设置依赖（provide） provide(name,value)
                2.输入数据(inject)    value = inject(name,default)
*/



// 发送请求来向服务器家在数据
const STUARR = ref([
    {
        id:1,
        name:"孙悟空",
        age:18,
        gender:"男",
        address:"花果山"
    },{
        id:2,
        name:"猪八戒",
        age:28,
        gender:"男",
        address:"高老庄"
    },{
        id:3,
        name:"沙和尚",
        age:38,
        gender:"男",
        address:"流沙河"
    }
])



// 添加一个删除学生的方法
const delstu = (index) => {

        STUARR.value.splice(index,1)
    
}
// 添加学生的方法
const addstu = (stu) => {
    const lastid = STUARR.value.at(-1) ? STUARR.value.at(-1).id + 1 : 1
    // STUARR.value.push(stu)
    stu.id = lastid
    // console.log(lastid);
    STUARR.value.push(stu)
}

provide("student",{
    students:STUARR,
    delstu,
    addstu
})

</script>

<template>
    <h1>hello vue</h1>
    <hr>
    <!-- 可以将组件中的方法以自定义事件来发送给其他组件 -->
    <StudentList></StudentList>
    <hr>
    <StudentForm></StudentForm>
</template>